<script setup >
let flexDirection = ref('row')
let writingMode = ref('horizontal-tb')
</script>

<template>
  <div class="wrap">
    <div class="form">
      <label for="flex-direction">flex-direction: </label>
      <select v-model="flexDirection" name="flex-direction" id="flex-direction">
        <option value="row">row</option>
        <option value="row-reverse">row-reverse</option>
        <option value="column">column</option>
        <option value="column-reverse">column-reverse</option>
      </select>

      <!-- 书写模式对flex-direction 的影响 -->
      <label for="writing-mode">writing-mode:</label>
      <select v-model="writingMode" name="writing-mode" id="writing-mode">
        <option value="horizontal-tb">horizontal-tb</option>
        <option value="vertical-lr">vertical-lr</option>
        <option value="vertical-rl">vertical-rl</option>
      </select>

    </div>
    <div class="container">
      <div class="item">flex项目1</div>
      <div class="item">flex项目2</div>
      <div class="item">flex项目3</div>
      <div class="item">flex项目4</div>
    </div>
    <h3>文本方向dir对 flex-direction 的影响</h3>
    <!--dir 设置文本方向 ltr rtl auto 默认是auto-->
    <div class="container" dir="rtl">
      <div class="item">flex项目1</div>
      <div class="item">flex项目2</div>
      <div class="item">flex项目3</div>
      <div class="item">flex项目4</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.wrap {
  --direction: v-bind(flexDirection);
  --writing-mode: v-bind(writingMode);
  .form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;


    label {
      white-space: nowrap;
      min-width: 160px;
      text-align: right;
    }

    select {
      padding: 0.25em 0.5em;
      font-size: inherit;
      min-width: 160px;
    }
  }
  .container {
    // 根据书写模式定义元素区块的横向或者纵向尺寸，对应 width 或者 height
    inline-size: 80vw;
    padding: 1rem;
    gap: 1rem;
    background: #fff;
    border: 3px solid #88978a;
    border-radius: 10px;
    display: flex;
    flex-direction: var(--direction);
    writing-mode: var(--writing-mode);

    .item {
      background: #e8f0fe;
      border: 2px solid #2938e9;
      border-radius: 4px;
      color: #000;
      padding: 1rem;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      inline-size: 180px;
      // 为盒子规定了首选纵横比
      aspect-ratio: 1;

      &:nth-child(2) {
        background-color: #efe1ff;
      }
      &:nth-child(3) {
        background-color: #bbd7af;
      }
    }
  }
}
</style>
